<template>
    <div class="con">
        <div class="head">
            <p class="head-title">森林防火感知预警平台</p>
        </div>
        <img src="../src/assets/static/image/bg2.png" alt="" class="bg">
        <div class="container">
            <!-- 左边区域 -->
            <div class="left-con">
                <!-- 卫星模块 -->
                <div class="satellite">
                    <!-- 模块标题 -->
                    <div class="small-title">
                        <div class="small-title-left">
                            <div class="bar"></div>
                            <p>卫星数据</p>
                        </div>
                        <router-link to="/Satellite">
                            <div class="small-title-right">
                                <img src="../src/assets/static/image/Satellite.png" alt="" class="icon">
                            </div>
                        </router-link>

                    </div>
                    <!-- 卫星模块数据 -->
                    <div class="satellite-con">
                        <!-- <div class="satellite-time">2023年11月20日 11:11</div> -->
                        <!-- 经纬度 -->
                        <div class="satellite-location">
                            <img src="../src/assets/static/image/locationy.png" alt="" class="satellite-location-img">
                            <!-- 年月日 -->
                            <div class="satellite-y">
                                <div class="satellite-y-con">
                                    <div class="satellite-con-title">年月日</div>
                                    <div class="satellite-con-value">2023.11.22</div>
                                </div>
                            </div>
                            <!-- 时分 -->
                            <div class="satellite-x">
                                <div class="satellite-x-con">
                                    <div class="satellite-con-title">时分</div>
                                    <div class="satellite-con-value">11:11</div>
                                </div>
                            </div>
                        </div>
                        <!-- 面积 -->
                        <div class="satellite-area">
                            <img src="../src/assets/static/image/area.png" alt="">
                            <div class="area-con">
                                <div class="area-title">最大火灾区域面积:</div>
                                <div class="area-value">80km²</div>
                            </div>
                        </div>
                        <!-- 等级 -->
                        <div class="satellite-level">
                            <!-- 火灾等级 -->
                            <div class="hot-level">
                                <img src="../src/assets/static/image/size-bg.png" alt="">
                                <div class="hot-level-value">1332</div>
                                <div class="hot-level-title">数据总数</div>
                            </div>
                            <div class="reliability-level">
                                <img src="../src/assets/static/image/size-bg.png" alt="">
                                <div class="reliability-value">高</div>
                                <div class="reliability-title">数据可靠性</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 历史森林火灾趋势模块 -->
                <div class="history">
                    <!-- 模块标题 -->
                    <div class="small-title">
                        <div class="small-title-left">
                            <div class="bar"></div>
                            <p>历史森林火灾趋势</p>
                        </div>
                        <router-link to="/History">
                            <div class="small-title-right">
                                <img src="../src/assets/static/image/trend.png" alt="" class="icon">
                            </div>
                        </router-link>
                    </div>
                    <!-- 历史森林火灾趋势数据 -->
                    <div class="history-con">
                        <div id="foldliner" style="width: 100%;height: 100%;"></div>
                    </div>
                </div>
            </div>
            <div class="center-con">
                <!-- 无人机视频区域 -->
                <div class="video">
                    <div class="video-head-option">
                        <!-- 选择区域 -->
                        <div class="chose-option">
                            <div class="context" @click="changeoption">
                                <p>选择区域</p>
                                <img src="../src/assets/static/image/right.png" alt="" class="select"
                                    :style="{ transform: 'rotate(' + rot + 'deg)' }">
                            </div>
                            <div class="chose-option-con" :style="{ height: optionConH + 'px' }">
                                <div class="chose-option-item" v-for="(item, index) in options" :key="item.id"
                                    @click="toggleSelect(index)">
                                    <img :src="item.chose == 1 ? 'https://ooo.0x0.ooo/2023/09/27/OnfQCC.png' : 'https://ooo.0x0.ooo/2023/09/27/OnfGSN.png'"
                                        alt="">
                                    <p>{{ item.text }}</p>
                                </div>
                            </div>
                        </div>
                        <!-- 选择区域面包屑 -->
                        <div class="head-option-item" v-for="(item, index) in breadList" :key="item.id">
                            <img src="../src/assets/static/image/close.png" alt="" class="close-img"
                                @click="close(index, breadList)">
                            <p>{{ item.text }}</p>
                        </div>
                    </div>

                    <div class="video-con">
                        <img src="../src/assets/static/image/video2.png" alt="" class="img">
                        <div class="video-list">
                            <div class="video-list-item" v-for="(item, index) in breadList" :key="item.id"
                                :style="{ height: videoItemH + 'px', width: videoItemW + 'px' }">
                                <WebRtcPlayer></WebRtcPlayer>
                                <div class="video-item-text">{{ item.text }}</div>
                            </div>
                            <!-- <div class="video-list-item"></div> -->
                            <!-- <div class="video-list-item"></div>
                            <div class="video-list-item"></div> -->
                        </div>
                    </div>
                </div>
                <!-- 无人机模块 -->
                <div class="drone">
                    <!-- 模块标题 -->
                    <div class="small-title">
                        <div class="small-title-left">
                            <div class="bar"></div>
                            <p>无人机实时数据</p>
                        </div>
                        <router-link to="/Drone">
                            <div class="small-title-right">
                                <img src="../src/assets/static/image/drone.png" alt="" class="icon">
                            </div>
                        </router-link>
                    </div>
                    <!-- Swiper -->
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <!-- 无人机相关数据 -->
                                <div class="drone-con">
                                    <div class="drone-items">
                                        <div class="drone-item">
                                            <div class="drone-item-title">
                                                <img src="../src/assets/static/image/number.png" alt="">
                                                <div class="drone-item-title-p">编号</div>
                                            </div>
                                            <div class="drone-item-value">
                                                1
                                            </div>
                                        </div>
                                        <div class="decorate">
                                            <img src="../src/assets/static/image/decorate1.png" alt="">
                                        </div>
                                    </div>
                                    <div class="drone-items">
                                        <div class="drone-item">
                                            <div class="drone-item-title">
                                                <img src="../src/assets/static/image/Y.png" alt="">
                                                <div class="drone-item-title-p">经度</div>
                                            </div>
                                            <div class="drone-item-value">
                                                30.8150541
                                            </div>
                                        </div>
                                        <div class="decorate">
                                            <img src="../src/assets/static/image/decorate1.png" alt="">
                                        </div>
                                    </div>
                                    <div class="drone-items">
                                        <div class="drone-item">
                                            <div class="drone-item-title">
                                                <img src="../src/assets/static/image/X.png" alt="">
                                                <div class="drone-item-title-p">纬度</div>
                                            </div>
                                            <div class="drone-item-value">
                                                30.8150541
                                            </div>
                                        </div>
                                        <div class="decorate">
                                            <img src="../src/assets/static/image/decorate1.png" alt="">
                                        </div>
                                    </div>
                                    <div class="drone-items">
                                        <div class="drone-item">
                                            <div class="drone-item-title">
                                                <img src="../src/assets/static/image/colum-height.png" alt="">
                                                <div class="drone-item-title-p">高度</div>
                                            </div>
                                            <div class="drone-item-value">
                                                30.8150541
                                            </div>
                                        </div>
                                        <div class="decorate">
                                            <img src="../src/assets/static/image/decorate1.png" alt="">
                                        </div>
                                    </div>
                                    <div class="drone-items">
                                        <div class="drone-item">
                                            <div class="drone-item-title">
                                                <img src="../src/assets/static/image/battery.png" alt="">
                                                <div class="drone-item-title-p">电量</div>
                                            </div>
                                            <div class="drone-item-value">
                                                26%
                                            </div>
                                        </div>
                                        <div class="decorate">
                                            <img src="../src/assets/static/image/decorate1.png" alt="">
                                        </div>
                                    </div>
                                    <div class="drone-items">
                                        <div class="drone-item">
                                            <div class="drone-item-title">
                                                <img src="../src/assets/static/image/distance.png" alt="">
                                                <div class="drone-item-title-p">航程</div>
                                            </div>
                                            <div class="drone-item-value">
                                                30.8150541
                                            </div>
                                        </div>
                                        <div class="decorate">
                                            <img src="../src/assets/static/image/decorate1.png" alt="">
                                        </div>
                                    </div>
                                    <div class="drone-items">
                                        <div class="drone-item">
                                            <div class="drone-item-title">
                                                <img src="../src/assets/static/image/time.png" alt="">
                                                <div class="drone-item-title-p">续航</div>
                                            </div>
                                            <div class="drone-item-value">
                                                30.8150541
                                            </div>
                                        </div>
                                        <div class="decorate">
                                            <img src="../src/assets/static/image/decorate1.png" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <!-- 无人机相关数据 -->
                                <div class="drone-con">
                                    <div class="drone-items">
                                        <div class="drone-item">
                                            <div class="drone-item-title">
                                                <img src="../src/assets/static/image/number.png" alt="">
                                                <div class="drone-item-title-p">编号</div>
                                            </div>
                                            <div class="drone-item-value">
                                                2
                                            </div>
                                        </div>
                                        <div class="decorate">
                                            <img src="../src/assets/static/image/decorate1.png" alt="">
                                        </div>
                                    </div>
                                    <div class="drone-items">
                                        <div class="drone-item">
                                            <div class="drone-item-title">
                                                <img src="../src/assets/static/image/Y.png" alt="">
                                                <div class="drone-item-title-p">经度</div>
                                            </div>
                                            <div class="drone-item-value">
                                                30.8150541
                                            </div>
                                        </div>
                                        <div class="decorate">
                                            <img src="../src/assets/static/image/decorate1.png" alt="">
                                        </div>
                                    </div>
                                    <div class="drone-items">
                                        <div class="drone-item">
                                            <div class="drone-item-title">
                                                <img src="../src/assets/static/image/X.png" alt="">
                                                <div class="drone-item-title-p">纬度</div>
                                            </div>
                                            <div class="drone-item-value">
                                                30.8150541
                                            </div>
                                        </div>
                                        <div class="decorate">
                                            <img src="../src/assets/static/image/decorate1.png" alt="">
                                        </div>
                                    </div>
                                    <div class="drone-items">
                                        <div class="drone-item">
                                            <div class="drone-item-title">
                                                <img src="../src/assets/static/image/colum-height.png" alt="">
                                                <div class="drone-item-title-p">高度</div>
                                            </div>
                                            <div class="drone-item-value">
                                                30.8150541
                                            </div>
                                        </div>
                                        <div class="decorate">
                                            <img src="../src/assets/static/image/decorate1.png" alt="">
                                        </div>
                                    </div>
                                    <div class="drone-items">
                                        <div class="drone-item">
                                            <div class="drone-item-title">
                                                <img src="../src/assets/static/image/battery.png" alt="">
                                                <div class="drone-item-title-p">电量</div>
                                            </div>
                                            <div class="drone-item-value">
                                                88
                                            </div>
                                        </div>
                                        <div class="decorate">
                                            <img src="../src/assets/static/image/decorate1.png" alt="">
                                        </div>
                                    </div>
                                    <div class="drone-items">
                                        <div class="drone-item">
                                            <div class="drone-item-title">
                                                <img src="../src/assets/static/image/distance.png" alt="">
                                                <div class="drone-item-title-p">飞行航程</div>
                                            </div>
                                            <div class="drone-item-value">
                                                30.8150541
                                            </div>
                                        </div>
                                        <div class="decorate">
                                            <img src="../src/assets/static/image/decorate1.png" alt="">
                                        </div>
                                    </div>
                                    <div class="drone-items">
                                        <div class="drone-item">
                                            <div class="drone-item-title">
                                                <img src="../src/assets/static/image/time.png" alt="">
                                                <div class="drone-item-title-p">飞行时间</div>
                                            </div>
                                            <div class="drone-item-value">
                                                30.8150541
                                            </div>
                                        </div>
                                        <div class="decorate">
                                            <img src="../src/assets/static/image/decorate1.png" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <!-- 无人机相关数据 -->
                                <div class="drone-con">
                                    <div class="drone-items">
                                        <div class="drone-item">
                                            <div class="drone-item-title">
                                                <img src="../src/assets/static/image/number.png" alt="">
                                                <div class="drone-item-title-p">编号</div>
                                            </div>
                                            <div class="drone-item-value">
                                                3
                                            </div>
                                        </div>
                                        <div class="decorate">
                                            <img src="../src/assets/static/image/decorate1.png" alt="">
                                        </div>
                                    </div>
                                    <div class="drone-items">
                                        <div class="drone-item">
                                            <div class="drone-item-title">
                                                <img src="../src/assets/static/image/Y.png" alt="">
                                                <div class="drone-item-title-p">经度</div>
                                            </div>
                                            <div class="drone-item-value">
                                                30.8150541
                                            </div>
                                        </div>
                                        <div class="decorate">
                                            <img src="../src/assets/static/image/decorate1.png" alt="">
                                        </div>
                                    </div>
                                    <div class="drone-items">
                                        <div class="drone-item">
                                            <div class="drone-item-title">
                                                <img src="../src/assets/static/image/X.png" alt="">
                                                <div class="drone-item-title-p">纬度</div>
                                            </div>
                                            <div class="drone-item-value">
                                                30.8150541
                                            </div>
                                        </div>
                                        <div class="decorate">
                                            <img src="../src/assets/static/image/decorate1.png" alt="">
                                        </div>
                                    </div>
                                    <div class="drone-items">
                                        <div class="drone-item">
                                            <div class="drone-item-title">
                                                <img src="../src/assets/static/image/colum-height.png" alt="">
                                                <div class="drone-item-title-p">高度</div>
                                            </div>
                                            <div class="drone-item-value">
                                                30.8150541
                                            </div>
                                        </div>
                                        <div class="decorate">
                                            <img src="../src/assets/static/image/decorate1.png" alt="">
                                        </div>
                                    </div>
                                    <div class="drone-items">
                                        <div class="drone-item">
                                            <div class="drone-item-title">
                                                <img src="../src/assets/static/image/battery.png" alt="">
                                                <div class="drone-item-title-p">电量</div>
                                            </div>
                                            <div class="drone-item-value">
                                                50
                                            </div>
                                        </div>
                                        <div class="decorate">
                                            <img src="../src/assets/static/image/decorate1.png" alt="">
                                        </div>
                                    </div>
                                    <div class="drone-items">
                                        <div class="drone-item">
                                            <div class="drone-item-title">
                                                <img src="../src/assets/static/image/distance.png" alt="">
                                                <div class="drone-item-title-p">飞行航程</div>
                                            </div>
                                            <div class="drone-item-value">
                                                30.8150541
                                            </div>
                                        </div>
                                        <div class="decorate">
                                            <img src="../src/assets/static/image/decorate1.png" alt="">
                                        </div>
                                    </div>
                                    <div class="drone-items">
                                        <div class="drone-item">
                                            <div class="drone-item-title">
                                                <img src="../src/assets/static/image/time.png" alt="">
                                                <div class="drone-item-title-p">飞行时间</div>
                                            </div>
                                            <div class="drone-item-value">
                                                30.8150541
                                            </div>
                                        </div>
                                        <div class="decorate">
                                            <img src="../src/assets/static/image/decorate1.png" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 右边功能模块 -->
            <div class="right-con">
                <!-- 更多操作 -->
                <div class="more-option">
                    <!-- 信息 -->
                    <div class="message">
                        <div class="message-info">1</div>
                        <img src="../src/assets/static/image/icon-18.png" alt="">
                    </div>
                </div>
                <!-- 传感器模块 -->
                <div class="sensor">
                    <!-- 模块标题 -->
                    <div class="small-title">
                        <div class="small-title-left">
                            <div class="bar"></div>
                            <p>传感器数据</p>
                        </div>
                        <router-link to="/Sensor">
                            <div class="small-title-right">
                                <img src="../src/assets/static/image/sensor.png" alt="" class="icon">
                            </div>
                        </router-link>
                    </div>
                    <!-- Swiper2 -->
                    <div class="swiper-container2">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" style="height: 322px;">
                                <!-- 传感器数据 -->
                                <div class="sensor-con">
                                    <div class="sensor-item">
                                        <img src="../src/assets/static/image/temperature.png" alt="">
                                        <div class="sensor-info">
                                            <div class="sensor-item-title">所属区域</div>
                                            <div class="sensor-item-value">一区</div>
                                        </div>
                                    </div>
                                    <div class="sensor-item">
                                        <img src="../src/assets/static/image/Humidity.png" alt="">
                                        <div class="sensor-info">
                                            <div class="sensor-item-title">湿度(%)</div>
                                            <div class="sensor-item-value">45</div>
                                        </div>
                                    </div>
                                    <div class="sensor-item">
                                        <img src="../src/assets/static/image/gas.png" alt="">
                                        <div class="sensor-info">
                                            <div class="sensor-item-title">CO₂(%)</div>
                                            <div class="sensor-item-value">12</div>
                                        </div>
                                    </div>
                                    <div class="sensor-item">
                                        <img src="../src/assets/static/image/smoke.png" alt="">
                                        <div class="sensor-info">
                                            <div class="sensor-item-title">烟雾浓度(%)</div>
                                            <div class="sensor-item-value">18</div>
                                        </div>
                                    </div>
                                    <div class="sensor-item">
                                        <img src="../src/assets/static/image/temperature.png" alt="">
                                        <div class="sensor-info">
                                            <div class="sensor-item-title">温度(℃)</div>
                                            <div class="sensor-item-value">27</div>
                                        </div>
                                    </div>
                                    <div class="sensor-item">
                                        <img src="../src/assets/static/image/temperature.png" alt="">
                                        <div class="sensor-info">
                                            <div class="sensor-item-title">气压(Pa)</div>
                                            <div class="sensor-item-value">101</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide" style="height: 322px;">
                                <!-- 传感器数据 -->
                                <div class="sensor-con">
                                    <div class="sensor-item">
                                        <img src="../src/assets/static/image/temperature.png" alt="">
                                        <div class="sensor-info">
                                            <div class="sensor-item-title">所属区域</div>
                                            <div class="sensor-item-value">二区</div>
                                        </div>
                                    </div>
                                    <div class="sensor-item">
                                        <img src="../src/assets/static/image/Humidity.png" alt="">
                                        <div class="sensor-info">
                                            <div class="sensor-item-title">湿度(%)</div>
                                            <div class="sensor-item-value">80</div>
                                        </div>
                                    </div>
                                    <div class="sensor-item">
                                        <img src="../src/assets/static/image/gas.png" alt="">
                                        <div class="sensor-info">
                                            <div class="sensor-item-title">CO₂(%)</div>
                                            <div class="sensor-item-value">10</div>
                                        </div>
                                    </div>
                                    <div class="sensor-item">
                                        <img src="../src/assets/static/image/smoke.png" alt="">
                                        <div class="sensor-info">
                                            <div class="sensor-item-title">烟雾浓度(%)</div>
                                            <div class="sensor-item-value">12</div>
                                        </div>
                                    </div>
                                    <div class="sensor-item">
                                        <img src="../src/assets/static/image/temperature.png" alt="">
                                        <div class="sensor-info">
                                            <div class="sensor-item-title">温度(℃)</div>
                                            <div class="sensor-item-value">100</div>
                                        </div>
                                    </div>
                                    <div class="sensor-item">
                                        <img src="../src/assets/static/image/temperature.png" alt="">
                                        <div class="sensor-info">
                                            <div class="sensor-item-title">温度(℃)</div>
                                            <div class="sensor-item-value">100</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 人员信息模块 -->
                <div class="people">
                    <!-- 模块标题 -->
                    <div class="small-title">
                        <div class="small-title-left">
                            <div class="bar"></div>
                            <p>最新信息</p>
                        </div>
                        <div class="small-title-right">
                            <img src="../src/assets/static/image/messages.png" alt="" class="icon">
                        </div>
                    </div>
                    <!-- 人员信息数据 -->
                    <div class="people-con">
                        <div class="people-item">
                            <div class="people-item-con">
                                <div class="people-item-left">
                                    <div class="people-item-time">2023-10-10 12:12:12</div>
                                    <div class="people-item-text">
                                        森林火情“空天地体化监测子系统用于接入卫星遥感监测、航空监测和地面监测等监测数据和热点信息的推送、跟踪和管理。
                                        森林火情“空天地体化监测子系统用于接入卫星遥感监测、航空监测和地面监测等监测数据和热点信息的推送、跟踪和管理。
                                        森林火情“空天地体化监测子系统用于接入卫星遥感监测、航空监测和地面监测等监测数据和热点信息的推送、跟踪和管理。
                                    </div>
                                </div>
                                <div class="people-item-right">
                                    <div class="people-item-box">
                                        <div class="people-small-title">
                                            姓名：
                                        </div>
                                        <div class="people-item-info">
                                            张女士
                                        </div>
                                    </div>
                                    <div class="people-item-box">
                                        <div class="people-small-title">
                                            身份：
                                        </div>
                                        <div class="people-item-info">
                                            护林员
                                        </div>
                                    </div>
                                    <div class="people-item-box">
                                        <div class="people-small-title">
                                            管理区域：
                                        </div>
                                        <div class="people-item-info">
                                            一区
                                        </div>
                                    </div>
                                    <div class="people-item-box">
                                        <div class="people-small-title">
                                            联系方式：
                                        </div>
                                        <div class="people-item-info">
                                            1234567899
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 部署资源模块 -->
                <div class="resource">
                    <!-- 模块标题 -->
                    <div class="small-title">
                        <div class="small-title-left">
                            <div class="bar"></div>
                            <p>部署资源</p>
                        </div>
                        <router-link to="/Resource">
                            <div class="small-title-right">
                                <img src="../src/assets/static/image/resources.png" alt="" class="icon">
                            </div>
                        </router-link>
                    </div>
                    <!-- 部署资源数据 -->
                    <div class="resource-con">
                        <div id="liner" style="width: 100%;height: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

import { ref, onMounted, onUnmounted } from 'vue';
import axios from '../src/api/api';
import WebRtcPlayer from '../components/WebRtcPlayer.vue'
import * as echarts from 'echarts';

onMounted(() => {
    
    initChart2();
    initChart();
    initswiper();
    initswiper2();
    test();
});

var videoItemH = ref(632.5);
var videoItemW = ref(920);
function test() {
    axios.post('/h08/test?text=1')
        .then(response => {
            console.log(response);
            // 处理数据
        })
        .catch(error => {
            console.error(error);
            // 处理错误
        });
}


function initswiper() {
    var swiper = new Swiper('.swiper-container', {
        loop: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
    });
};

function initswiper2() {
    var swiper2 = new Swiper('.swiper-container2', {
        loop: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
    });
};

onUnmounted(() => {
    myEcharts.dispose;
});

let myEcharts = echarts;
function initChart() {
    let chart = myEcharts.init(document.getElementById("liner"), "purple-passion");
    chart.setOption({
        backgroundColor: 'transparent',
        title: {
            text: '数量',
            left: 30,
            // 文字颜色
            textStyle: {
                color: '#00b3f5'
            }
        },
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['无人机', '传感器', '消防车', '灭火器', '巡护人员', '瞭望塔'],
                axisTick: {
                    alignWithLabel: true
                },
                //x底部文字
                axisLabel: {
                    textStyle: {
                        color: '#00b3f5',
                        fontSize: 10
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                //y右侧文字
                axisLabel: {
                    textStyle: {
                        color: '#00b3f5'
                    }
                },
                // y轴的分割线
                splitLine: {
                    show: false
                }
            }
        ],
        series: [
            {
                name: '数量',
                type: 'bar',
                barWidth: '15',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#00fffb' },
                        { offset: 1, color: '#0061ce' }
                    ])
                },
                data: [10, 50, 60, 30, 100, 60].map(item => {
                    if (item > 0) {
                        return item
                    } else {
                        return {
                            value: item,
                            itemStyle: {
                                color: '#254065',
                                opacity: 0.5
                            }
                        }
                    }
                })
            }
        ]
    })
}


let myEcharts2 = echarts;
function initChart2() {
    let chart = myEcharts2.init(document.getElementById("foldliner"), "purple-passion");
    chart.setOption({
        backgroundColor: 'transparent',
        baseOption: {
            // 防止因高度小被压扁
            grid: {
                top: 8,
                bottom: 72,
                left: 60,
                right: 12,
            },
            xAxis: {
                // x轴颜色
                axisLine: {
                    lineStyle: {
                        color: "#5092c1",
                    },
                },
                data: [
                    "1",
                    "2",
                    "3",
                    "4",
                    "5",
                    "6",
                    "7",
                    "8",
                    "9",
                    "10",
                    "11",
                    "12",
                ],
            },
            yAxis: {
                // y轴颜色
                axisLine: {
                    lineStyle: {
                        color: "#5092c1",
                    },
                },
                // y轴分割线颜色
                splitLine: {
                    lineStyle: {
                        color: "rgba(101, 198, 231, 0.2)",
                    },
                },
            },
            tooltip: {
                trigger: "axis",
                backgroundColor: "#0a2043",
                textStyle: {
                    color: "white",
                },
                borderColor: "#00a2ff",
                // 坐标轴指示器
                axisPointer: {
                    lineStyle: {
                        color: "rgba(255,255,255,0.4)",
                        type: "solid",
                    },
                },
                formatter(params) {
                    const data = params[0];
                    const str = data
                        ? `${params[0].axisValue}月情况：${params[0].value}次`
                        : "";
                    return str;
                },
            },
            timeline: {
                data: ["2018", "2019", "2020", "2021"],
                autoPlay: true,
                playInterval: 3000,
                lineStyle: {
                    color: "#216fc5",
                },
                controlStyle: {
                    showPrevBtn: false,
                    showNextBtn: false,
                    itemGap: 24,
                    color: "#04cdf4",
                    borderColor: "#04cdf4",
                },
                checkpointStyle: {
                    color: "#04cdf4",
                    borderColor: "#04cdf4",
                },
                itemStyle: {
                    color: "#216fc5",
                },
                label: {
                    formatter(params) {
                        return `${new Date(params).getFullYear()}年`;
                    },
                    color: "#216fc5",
                },
                left: "3%",
                right: "4%",
            },
            series: [
                {
                    type: "line",
                    // 渐变区域
                    // https://echarts.apache.org/examples/zh/editor.html?c=area-simple
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "rgba(67, 144, 250, 0.5)",
                            },
                            {
                                offset: 1,
                                color: "rgba(4, 205, 244, 0)",
                            },
                        ]),
                    },
                    // 折线颜色
                    color: "#04cdf4",
                },
            ],
        },
        options: [
            {
                series: {
                    data: [
                        { name: "1月", value: 5274 },
                        { name: "2月", value: 9539 },
                        { name: "3月", value: 21342 },
                        { name: "4月", value: 10699 },
                        { name: "5月", value: 9726 },
                        { name: "6月", value: 9593 },
                        { name: "7月", value: 10845 },
                        { name: "8月", value: 11059 },
                        { name: "9月", value: 10239 },
                        { name: "10月", value: 9204 },
                        { name: "11月", value: 5213 },
                        { name: "12月", value: 5267 },
                    ],
                },
            },
            {
                series: {
                    data: [
                        { name: "1月", value: 10596 },
                        { name: "2月", value: 7778 },
                        { name: "3月", value: 9276 },
                        { name: "4月", value: 8500 },
                        { name: "5月", value: 7763 },
                        { name: "6月", value: 7829 },
                        { name: "7月", value: 86886 },
                        { name: "8月", value: 5289 },
                        { name: "9月", value: 6803 },
                        { name: "10月", value: 5201 },
                        { name: "11月", value: 3705 },
                        { name: "12月", value: 9428 },
                    ],
                },
            },
            {
                series: {
                    data: [
                        { name: "1月", value: 7875 },
                        { name: "2月", value: 3566 },
                        { name: "3月", value: 10469 },
                        { name: "4月", value: 19417 },
                        { name: "5月", value: 9189 },
                        { name: "6月", value: 7163 },
                        { name: "7月", value: 7846 },
                        { name: "8月", value: 4261 },
                        { name: "9月", value: 16019 },
                        { name: "10月", value: 5935 },
                        { name: "11月", value: 3314 },
                        { name: "12月", value: 6364 },
                    ],
                },
            },
            {
                series: {
                    data: [
                        { name: "1月", value: 2558 },
                        { name: "2月", value: 2847 },
                        { name: "3月", value: 7117 },
                        { name: "4月", value: 7062 },
                        { name: "5月", value: 3852 },
                        { name: "6月", value: 14607 },
                        { name: "7月", value: 1970 },
                    ],
                },
            },
        ],
    })
}


var optionConH = ref(0);
var rot = ref(0);
var ischose = ref(false);
// 切换显示下拉选择区域
function changeoption() {
    if (!ischose.value) {
        rot.value = 90;
        optionConH.value = 575;
    } else {
        optionConH.value = 0;
        rot.value = 0;
    }
    ischose.value = !ischose.value;
}

var options = ref([
    {
        id: 1,
        text: '一区',
        chose: 0
    },
    {
        id: 2,
        text: '二区',
        chose: 0
    },
    {
        id: 3,
        text: '三区',
        chose: 0
    },
    {
        id: 4,
        text: '四区',
        chose: 0
    },
    {
        id: 5,
        text: '五区',
        chose: 0
    },
    {
        id: 6,
        text: '六区',
        chose: 0
    },
    {
        id: 7,
        text: '七区',
        chose: 0
    }
]);
// 选择元素的索引
var selected = ref([]);

let count = 0; // 记录已选择的数量
// 拿到标识了哪一个的索引，根据索引去更改原数组的chose值
function toggleSelect(index) {
    // 创建一个新的 Set 数据结构，命名为 selectedSet，并将 selected.value 数组作为初始值传递给 Set 构造函数
    const selectedSet = new Set(selected.value);

    if (selectedSet.has(index)) {
        selectedSet.delete(index);
        count--;
        // 限制最多4个
    } else if (count < 4) {
        selectedSet.add(index);
        count++;
    }
    //   将 selectedSet 这个 Set 数据结构转换为一个数组，并将该数组赋值给 selected.value
    selected.value = Array.from(selectedSet);

    // 更新原数组中的chose值
    options.value.forEach((item, idx) => {
        item.chose = selectedSet.has(idx) ? 1 : 0;
    });
    console.log("options.value", options.value);
    haschose(options.value)
}
// 面包屑数组
var breadList = ref([]);
function haschose(options) {
    const chosenItems = options.filter(item => item.chose === 1);
    console.log("面包屑", chosenItems);
    breadList = chosenItems
    if (breadList.length == 1) {
        videoItemH.value = 632.5
        videoItemW.value = 920
    } else if (breadList.length == 2) {
        videoItemH.value = 575
        videoItemW.value = 454.25
    } else {
        videoItemH.value = 310.5
        videoItemW.value = 454.25
    }
}
// 根据索引关闭对应项
function close(index) {
    // 拿到删除项的id把options里面的项做对应更改
    const removedItem = breadList.splice(index, 1)[0];
    if (breadList.length == 1) {
        videoItemH.value = 632.5
        videoItemW.value = 920
    } else if (breadList.length == 2) {
        videoItemH.value = 575
        videoItemW.value = 454.25
    } else {
        videoItemH.value = 310.5
        videoItemW.value = 454.25
    }
    const removedItemId = removedItem.id;

    // 更新 selected 数组和 count 变量
    const newSelected = [];
    let newCount = 0;
    //   遍历options项修改对应id的项的chose中
    options.value.forEach((item, idx) => {
        if (item.id === removedItemId) {
            item.chose = 0;
        }
        if (item.chose === 1) {
            // 更新最新的值
            newSelected.push(idx);
            newCount++;
        }
    });

    selected.value = newSelected;
    count = newCount;
    console.log("关闭之后的options", options.value);
}

</script>



<style scoped>
@import url(../src/assets/static/css/swiper.min.css);
html,
body {
    position: relative;
    height: 100%;
}

.con {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    background: url(../src/assets/static/image/bg2.png) no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #1e2e49;
}
.bg {
    width: 100%;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    z-index: -1;
}

.head {
    position: fixed;
    top: 0;
    left: 0;
    background: url(../src/assets/static/image/head3.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 80.5px;
}

.head-title {
    text-align: center;
    font-size: 27.6px;
    line-height: 17.25px;
    color: rgb(95, 218, 255);
}

.plane {
    width: 575px;
    height: 460px;
}

.container {
    height: calc(100%-75px);
    margin-top: 75px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* 左边区域 */
.satellite {
    width: 460px;
}

.small-title {
    height: 34.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 21.85px;
    background-color: rgba(36, 74, 126, 0.3);
}

.small-title-left {
    display: flex;
    align-items: center;
}

.bar {
    width: 11.5px;
    height: 34.5px;
    margin-right: 20px;
    box-shadow: 0 0 20px 10px #064574;
    background: linear-gradient(to bottom, #036eb1, #00f4f0);
}

.icon {
    width: 23px;
    height: 23px;
    margin-right: 23px;
}
.satellite-con {
    box-sizing: border-box;
    width: 100%;
    height: 448.5px;
    border-radius: 0 0 11.5px 11.5px;
    border: 1.15px solid #036eb1;
}

.satellite-location {
    padding: 5.75px;
    display: flex;
    margin: 23px 11.5px;
    align-items: center;
    justify-content: space-around;
    background-color: rgba(36, 74, 126, 0.3);
}

.satellite-con .satellite-time {
    padding: 5.75px 0 0 11.5px;
    font-size: 23px;
    font-weight: 600;
    color: #ffff;
}

.satellite-y,
.satellite-x {
    color: #fff;
    font-weight: 600;
}

.satellite-y-con,
.satellite-x-con {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

.satellite-con-value {
    color: #00b3f5;
    font-weight: 600;
    font-size: 23px;
    line-height: 23px;
    margin-top: 11.5px;
}

.satellite-location-img {
    width: 69px;
    height: 69px;
}

.satellite-area img {
    width: 57.5px;
    height: 57.5px;
    margin-right: 23px;
}

.satellite-area {
    margin: 23px 11.5px 0px 11.5px;
    padding: 5.75px 0;
    display: flex;
    align-items: center;
    border-top: 1.15px solid #00b3f5;
    border-bottom: 1.15px solid #00b3f5;
}

.area-con {
    color: #fff;
    display: flex;
    font-weight: 600;
    align-items: center;
    justify-content: space-between;
}

.area-value {
    color: #00b3f5;
    font-size: 26.45px;
    margin-left: 23px;
}

.satellite-level {
    padding: 11.5px;
    display: flex;
    margin-top: 11.5px;
    align-items: center;
    justify-content: space-around;
}

.hot-level,
.reliability-level {
    position: relative;
    width: 161px;
    height: 195.5px;
    font-weight: 600;
    color: #fff;
}

.hot-level,
.reliability-level {
    position: relative;
    width: 161px;
    height: 184px;
    font-weight: 600;
    color: #fff;
}

.hot-level img,
.reliability-level img {
    position: absolute;
    left: 0;
    top: 0;
    width: 161px;
    height: 149.5px;
}

.hot-level .hot-level-title,
.reliability-level .reliability-title {
    position: absolute;
    bottom: 0;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    width: 264.5px;
    /* left: 50%;
    transform: translateX(-50%); */
}

.hot-level .hot-level-value,
.reliability-level .reliability-value {
    position: absolute;
    top: 51.75px;
    left: 50%;
    color: #00b3f5;
    font-size: 27.6px;
    font-weight: 600;
    transform: translateX(-50%);
}

.history {
    box-sizing: border-box;
    margin-top: 23px;
    position: relative;
    width: 460px;
}

.history-con {
    padding: 11.5px;
    height: 425.5px;
    border-radius: 0 0 11.5px 11.5px;
    border: 1.15px solid #036eb1;
}
/* 中心模块,视频模块 */
.video {
    width: 977.5px;
    height: 690px;
    /* margin-top: 80px; */
}

.video img {
    width: 100%;
    height: 100%;
}

.video .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.video-head-option {
    text-align: center;
    line-height: 69px;
    display: flex;
    width: 100%;
    height: 69px;
    align-items: center;
    flex-wrap: wrap;
}

.video-con {
    width: 977.5px;
    height: 690px;
    display: grid;
    place-items: center;
    position: relative;
}

.video-list {
    width: 920px;
    height: 632.5px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 11.5px;
    row-gap: 11.5px;
}

.video-list-item {
    position: relative;
    z-index: 2;
    /* background-color: #00b3f5; */
    /* 一个的时候 */
    /* width: 800px;
    height: 550px; */
    /* 俩个 */
    /* width: 395px;
    height: 550px; */
    /* 四个 */
    /* width: 395px;
    height: 270px; */
}

.head-option-item {
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    color: #fff;
    width: 172.5px;
    height: 42.6px;
    background: url(../src/assets/static/image/btn1-active.png) no-repeat;
    background-size: contain;
}

.head-option-item .close-img {
    position: absolute;
    right: -8.05px;
    top: -11.5px;
    width: 23px;
    height: 23px;
}

.chose-option {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 172.5px;
    height: 57.5px;
    color: #fff;
    background: url(../src/assets/static/image/btn2.png) no-repeat;
    background-size: contain;
}

.chose-option .bg-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.chose-option .select {
    width: 23px;
    height: 23px;
    transition: all 0.5s;
}

.chose-option .context {
    display: flex;
    align-items: center;
}
.chose-option-con {
    position: absolute;
    top: 69px;
    left: 5.75px;
    text-align: center;
    width: 172.5px;
    overflow: hidden;
    transition: all 0.5s;
    z-index: 99;
}

.chose-option-item {
    width: 172.5px;
    color: #fff;
    height: 46px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 11.5px 0;
}

.chose-option-item img {
    position: absolute;
    top: 0;
    left: 0;
}

.chose-option-item p {
    position: absolute;
}
.drone {
    box-sizing: border-box;
    position: relative;
    margin-top: 69px;
    width: 977.5px;
}

.drone-con {
    width: 977.5px;
    padding: 11.5px;
    height: 172.5px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    /* border-radius: 0 0 10px 10px;
    border: 1px solid #036eb1; */
}
.decorate {
    width: 126.5px;
    height: 69px;
    position: absolute;
    bottom: 0;
}

.decorate img {
    width: 115px;
    height: 69px;
}

.swiper-container {
    width: 100%;
    height: 100%;
    border-radius: 0 0 11.5px 11.5px;
    border: 1.15px solid #036eb1;
}

.swiper-container2 {
    width: 100%;
    height: 100%;
    border-radius: 0 0 11.5px 11.5px;
    border: 1.15px solid #036eb1;
    overflow: hidden;
}

.swiper-slide {
    height: 172.5px;
    padding: 11.5px 0;
    text-align: center;
    font-size: 20.7px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    display: flex;
    justify-content: center;
}
.drone-items {
    width: 115px;
    height: 178.25px;
    position: relative;
}

.drone-item {
    width: 115px;
    height: 115px;
    border-radius: 11.5px;
    border: 1.15px solid #00b3f5;
}

.drone-item-title {
    display: flex;
    align-items: center;
    color: #00b3f5;
    margin-top: 5.75px;
    margin-bottom: 5.75px;
    flex-direction: column;
}

.drone-item-title img {
    width: 34.5px;
    height: 34.5px;
    margin-bottom: 5.75px;
}

.drone-item-value {
    color: #fff;
    font-size: 18.4px;
    text-align: center;
    line-height: 34.5px;
    border-left: 2.3px solid #00f4f0;
    border-right: 2.3px solid #00f4f0;
    height: 34.5px;
    background-color: rgba(103, 183, 233, 0.1);
}
/* 右边模块 */
.right-con {
    box-sizing: border-box;
    width: 460px;
}
.more-option {
    display: flex;
    justify-content: flex-end;
    width: 448.5px;
    margin-top: -46px;
}
.message {
    position: relative;
}

.message-info {
    position: absolute;
    right: -11.5px;
    top: 0;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 23px;
    font-size: 13.8px;
    font-weight: 600;
    background-color: #d02e61;
}

.message img {
    width: 46px;
    height: 46px;
}

.sensor {
    box-sizing: border-box;
    position: relative;
    width: 460px;
}

.sensor-con {
    /* width: 34.5px; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 11.5px;
    height: 322px;
    grid-column-gap: 11.5px;
    grid-row-gap: 11.5px;
    /* border-radius: 0 0 10px 10px;
    border: 1px solid #036eb1; */
}

.people {
    box-sizing: border-box;
    position: relative;
    width: 460px;
    margin-top: 23px;
}

.people-con {
    padding: 11.5px;
    height: 230px;
    border-radius: 0 0 11.5px 11.5px;
    border: 1.15px solid #036eb1;
}

.resource {
    box-sizing: border-box;
    position: relative;
    width: 460px;
    margin-top: 23px;
}

.resource-con {
    width: 100%;
    height: 230px;
    border-radius: 0 0 11.5px 11.5px;
    border: 1.15px solid #036eb1;
}

.sensor-item {
    padding: 11.5px;
    width: 189.75px;
    height: 69px;
    display: flex;
    justify-content: space-between;
    background-color: rgba(36, 74, 126, 0.3);
    align-items: center;
}

.sensor-item img {
    width: 46px;
    height: 46px;
    margin-right: 23px;
}

.sensor-item-title {
    color: #fff;
    font-size: 19.55px;
}

.sensor-item-value {
    color: #00b3f5;
    font-weight: 600;
    font-size: 27.6px;
}

.sensor-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.people-item-con {
    display: flex;
    justify-content: space-between;
}

.people-item-left {
    width: 276px;
    overflow: hidden;
}

.people-item-left .people-item-time {
    color: #fff;
    padding-bottom: 5.75px;
    margin-bottom: 11.5px;
    border-bottom: 2.3px solid #00b3f5;
}

.people-item-left .people-item-text {
    width: 307.05px;
    height: 184px;
    overflow: auto;
    color: #fff;
    font-size: 20.7px;
    text-indent: 2em;
    overflow-y: scroll;
}

.people-item-right {
    width: 138px;
}

.people-item-right .people-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 5.75px solid #fff;
}

.people-item-right .people-avatar img {
    width: 46px;
    height: 46px;
}

.people-small-title {
    border-left: 4.6px solid #00f4f0;
    color: #fff;
    font-size: 16.1px;
}

.people-item-info {
    color: #00b3f5;
    font-weight: 600;
    text-align: center;
}

.people-item-box {
    margin-bottom: 14.95px;
    border-bottom: 1.15px solid #fefefe;
}
</style>
